<template>
  <div>
    <div v-if="editable" class="crud-opts">
      <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="doAddItem">增加</el-button>
      <el-button
        class="filter-item"
        size="mini"
        type="danger"
        icon="el-icon-delete"
        @click="doDeleteItem">删除</el-button>
      <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-document-copy"
        @click="doCopyItem">复制</el-button>
    </div>
    <DataGridTable
      :data="trxDetails"
      :show-summary="true"
      :show-page="false"
      summary-field=",rmk,trxMoney"
      size="mini"
      max-height="300px"
      height="300px"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column label="收款说明" prop="rmk" width="200">
        <template slot-scope="scope">
          <el-input v-model="scope.row.rmk" :disabled="!editable" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
      <el-table-column label="科目" width="150">
        <template slot-scope="scope">
          <FinItemTreeSelect ref="finItemTreeSelect" :editable="editable" v-model="scope.row.finCode" :data-trees="finCodeList" style="width: 100%" placeholder="选择科目" />
        </template>
      </el-table-column>
      <el-table-column label="本位币应收金额" prop="trxMoney" width="150">
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.trxMoney" :disabled="!editable" :controls="false" :precision="2" size="mini" style="width: 100%" @change="trxMoneyChange(scope.row)"/>
        </template>
      </el-table-column>
      <el-table-column label="付款方式" prop="paymentType" width="150">
        <template slot-scope="scope">
          <el-select v-if="editable" v-model="scope.row.paymentType" size="mini" placeholder="付款方式">
            <el-option
              v-for="(item) in dicts.bus_payment_type"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"/>
          </el-select>
          <template v-for="item in dicts.bus_payment_type" v-else >
            <span v-if="scope.row.paymentType === item.dictCode" :key="item.id" >{{ item.dictName }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="订单号" prop="sourceCode" show-overflow-tooltip />
      <el-table-column label="明细批号" prop="sourceDetailLotNo" show-overflow-tooltip />
    </DataGridTable>
  </div>
</template>

<script>
import finItem from '@/api/fin/FinItem'
import FinItemTreeSelect from '@/views/fin/baseitem/module/FinItemTreeSelect'

export default {
  dictTypes: ['bus_payment_type'],
  components: { FinItemTreeSelect },
  props: {
    trxDetails: {
      type: Array,
      required: true
    },
    editable: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      finCodeList: [],
      loading: false,
      selectedDetailRows: [],
      style: 'width: 150px'
    }
  },
  created() {
    finItem.getFinItemData({ 'activeFlag': 'Y' }).then(res => {
      this.finCodeList = res.data
    })
  },
  methods: {
    trxMoneyChange(detailRow) {
    },
    getMaxDetailNum() {
      let detailNum = 0
      this.trxDetails.forEach(tmprow => {
        if (tmprow.num > detailNum) {
          detailNum = tmprow.num
        }
      })
      return detailNum
    },
    handleSelectionChange(val) {
      this.selectedDetailRows = val
    },
    doAddItem() {
      const tmpDetails = JSON.parse(JSON.stringify(this.trxDetails))
      let detailNum = this.getMaxDetailNum()
      const addRow = {}
      detailNum++
      addRow.num = detailNum
      addRow.rmk = '收款'
      tmpDetails.push(addRow)
      this.$emit('setDetails', tmpDetails)
    },
    doDeleteItem() {
      let tmpDetails = JSON.parse(JSON.stringify(this.trxDetails))
      this.selectedDetailRows.forEach(tmprow => {
        tmpDetails = tmpDetails.filter(vo => vo.num !== tmprow.num)
      })
      this.$emit('setDetails', tmpDetails)
    },
    doCopyItem() {
      const tmpDetails = JSON.parse(JSON.stringify(this.trxDetails))
      let detailNum = this.getMaxDetailNum()
      this.selectedDetailRows.forEach(tmprow => {
        const addRow = JSON.parse(JSON.stringify(tmprow))
        detailNum++
        addRow.id = null
        addRow.detailLotNo = null
        addRow.finWaitId = null
        addRow.sourceBusClass = null
        addRow.sourceCode = null
        addRow.sourceDetailLotNo = null
        addRow.num = detailNum
        tmpDetails.push(addRow)
      })
      this.$emit('setDetails', tmpDetails)
    }
  }
}
</script>
